<template>
  <div class="app-container">
    <!-- 主路由视图 (显示MusicPlayer或歌单) -->
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

// 路由切换时切换页面背景色
router.beforeEach((to) => {
  document.body.style.backgroundColor = to.meta.backgroundColor || 'var(--bg-gradient)';
});
</script>

<style>
/* 全局样式 */
:root {
  --primary-color: #1db954; /* 网易云绿 */
  --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
}

body {
  background: var(--bg-gradient);
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

/* 响应式基础 */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}
</style>